<template>
  <view class="container">
    <!-- 父组件输入区 -->
    <view class="parent-area">
      <text class="title">父组件</text>
      
      <!-- 输入值区域 -->
      <view class="input-group">
        <text class="label">输入值：</text>
        <input 
          type="text" 
          v-model="title" 
          class="input red-text" 
          placeholder="请输入内容传递给comA"
        />
      </view>

      <!-- 回传值区域 -->
      <view class="input-group">
        <text class="label">回传值：</text>
        <input 
          type="text" 
          :value="callBackValue" 
          class="input yellow-text" 
          readonly 
        />
      </view>
    </view>

    <!-- 子组件A -->
    <comA 
      :parentValue="title" 
      @sendToParent="handleAData" 
      class="child-area child-a"
    />

    <!-- 子组件B -->
    <comB 
      :fromAValue="aData" 
      @callBack="callBack" 
      class="child-area child-b"
    />
  </view>
</template>

<script>
import comA from '../../../../../components/compA.vue'
import comB from '../../../../../components/compB.vue'

export default {
  components: { comA, comB },
  data() {
    return {
      title: '', // 父组件输入值
      callBackValue: '', // 接收子组件B的回传值
      aData: '' // 接收子组件A传递的值
    }
  },
  methods: {
    // 接收子组件A的数据（用于传递给子组件B）
    handleAData(value) {
      this.aData = value
    },
    // 接收子组件B的回传值
    callBack(value) {
      this.callBackValue = value
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

/* 父组件区域样式 */
.parent-area {
  padding: 20rpx;
  background: #ffffff;
  border: 1px solid #ddd;
}

.title {
  display: block;
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
  gap: 10rpx;
}

.label {
  font-size: 26rpx;
  color: #666;
  width: 120rpx;
}

.input {
  flex: 1;
  height: 70rpx;
  padding: 0 15rpx;
  background: #cccccc; /* 灰色背景 */
  border: 1px solid #aaa;
  font-size: 24rpx;
}

.red-text {
  color: red; /* 输入值红色文字 */
}

.yellow-text {
  color: yellow; /* 回传值黄色文字 */
}

/* 子组件通用样式 */
.child-area {
  padding: 20rpx;
  border: 1px solid #ddd;
}

/* 子组件A样式（橙色背景） */
.child-a {
  background: #ffcc99;
}

/* 子组件B样式（绿色背景） */
.child-b {
  background: #ccffcc;
}
</style>